<template>
  <div class="user container-m">
    <div class="info">
      <div class="l">
        <div class="l1">{{ $t("余额") }}</div>
        <div class="money">{{ getUserInfo.pointsBalance }}</div>
      </div>
      <div class="r">
        <div class="btn btn-1" @click="$router.push('/charge')">
          {{ $t("充值") }}
        </div>
        <div class="btn btn-2" @click="$router.push('/withdrawal')">
          {{ $t("提现") }}
        </div>
      </div>
    </div>
    <DataStatMobil />
    <div class="api" v-if="getUserInfo.apiKey">
      <div class="key" @click="copyToClipboard(getUserInfo.apiKey)">复制apiKey:</div>
      <div class="val" style="padding-left: 10px;">{{ getUserInfo.apiKey }}</div>
    </div>
    <div class="feature">
      <div class="item">
        <div class="t">{{ $t("修改密码") }}</div>
        <div class="cont">
          <el-form :model="form01" :rules="rulse01" ref="form01" size="mini">
            <el-form-item :label="$t('新密码')" prop="newPassword">
              <el-input v-model="form01.newPassword" type="password" :placeholder="$t('输入新密码')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('重复新密码')" prop="ensureNewPassword">
              <el-input v-model="form01.ensureNewPassword" type="password" :placeholder="$t('再输入一次')"></el-input>
            </el-form-item>
            <div class="btn" @click="submitPassword">
              {{ $t("确认修改密码") }}
            </div>
          </el-form>
        </div>
      </div>
      <div class="item">
        <div class="t">{{ $t("绑定邮箱") }}</div>
        <div class="cont">
          <el-form :model="form02" :rules="rulse02" ref="form02" size="mini">
            <el-form-item :label="$t('安全邮箱')" prop="email">
              <el-input v-model="form02.email" :placeholder="$t('输入想要绑定的邮箱')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('验证码')" prop="code">
              <div style="display: flex;align-items: center;">
                <el-input v-model="form02.code" type="text" :placeholder="$t('输入验证码')"></el-input>
                <el-button type="primary" @click="sendCode" :disabled="code">发送</el-button>
              </div>
            </el-form-item>
            <div class="t1">{{ $t("已绑定第三方账号") }}: {{ $t("微信") }}</div>
            <div class="t1">{{ $t("如需解除第三方账号绑定，联系客服") }}</div>
            <div class="btn" style="margin-top: 0.1rem" @click="submitEmail">
              {{ $t("提交更改") }}
            </div>
          </el-form>
        </div>
      </div>
      <div class="item">
        <div class="t">{{ $t("邮件设置") }}</div>
        <div class="cont">
          <el-form :model="form03" :rules="rulse03" ref="form03" size="mini">
            <el-form-item prop="psw">
              <el-checkbox v-model="form03.checked1" @change="pushEmail" :true-label="0" :false-label="1">{{
                $t("订阅服务更新邮件")
              }}</el-checkbox>
              <el-checkbox v-model="form03.checked2" @change="pushCost" :true-label="0" :false-label="1">{{
                $t("接受低余额提醒")
              }}</el-checkbox>
            </el-form-item>
            <el-form-item :label="$t('提醒金额')" prop="balanceReminderAmount">
              <el-input v-model="form03.balanceReminderAmount"></el-input>
            </el-form-item>
            <div class="btn" @click="submitAmount">{{ $t("提交更改") }}</div>
          </el-form>
        </div>
      </div>
      <div class="item">
        <div class="t">{{ $t("API设置") }}</div>
        <div class="cont">
          <div class="disf alc">
            <div class="t2">{{ $t("当前启用状态") }}</div>
            <div>
              <div class="t3">{{ $t("禁用") }}</div>
            </div>
          </div>

          <div class="btn" style="margin-top: 10px">
            {{ $t("启用API功能") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apiService from "@/api/apiService";
// import {isWx, loginOutUser, replace} from "@/utils";
import { mapGetters } from "vuex";
import DataStatMobil from "@/components/home/DataStatMobil.vue";

export default {
  data() {
    let validatePass = (rule, value, callback) => {
      const reg = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/;
      if (!reg.test(value)) {
        callback(new Error(this.$t("包含大小写字母、数字")));
      } else {
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("请再次输入密码")));
      } else if (value !== this.form01.newPassword) {
        callback(new Error(this.$t("两次输入密码不一致!")));
      } else {
        callback();
      }
    };
    return {
      form01: {
        newPassword: "",
        ensureNewPassword: "",
      },
      rulse01: {
        newPassword: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        ensureNewPassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      form02: {
        email: '',
        code: '',
        userKey: '',
        mailKey: '',
      },
      rulse02: {
        email: [
          {
            required: true,
            message: this.$t("请输入邮箱地址"),
            trigger: "blur",
          },
          {
            type: "email",
            message: this.$t("请输入正确的邮箱地址"),
            trigger: ["blur", "change"],
          },
        ],
        code: [
          { required: true, trigger: 'blur' }
        ]
      },
      form03: {
        balanceReminderAmount: "",
        checked1: '1',
        checked2: '1'
      },
      rulse03: {
        balanceReminderAmount: [
          { required: true, message: this.$t("请输入金额"), trigger: "blur" },
        ],
      },
      code: false,
    };
  },
  components: {
    DataStatMobil,
  },
  computed: {
    ...mapGetters(["getUserInfo"]),
  },
  mounted() {
    this.$store.dispatch('getCurrentUserInfo').then(res => {
      const { email, isSubscribeCost, isSubscribeEmail, balanceReminderAmount } = res
      this.form02.email = email
      this.form03.checked1 = isSubscribeEmail
      this.form03.checked2 = isSubscribeCost
      this.form03.balanceReminderAmount = balanceReminderAmount
    })

  },
  methods: {
    // 修改密码
    submitPassword() {
      this.$refs.form01.validate((valid) => {
        if (valid) {
          apiService
            .post("/modifyPassword", {
              ...this.form01,
            })
            .then(() => {
              this.$message.success(this.$t("修改成功"));
            });
        }
      });
    },
    sendCode() {
      this.code = true
      this.$refs.form02.validateField(['email'], (error) => {
        if (error) {
          console.log("校验失败:", error);
        } else {
          apiService.post("/update-email", {
            ...this.form02
          }).then((res) => {
            this.$message.success(this.$t('发送成功'))
            this.form02.mailKey = res.data.mailKey
            this.form02.userKey = res.data.userKey
          });
        }

      });
    },
    // 修改邮件
    submitEmail() {
      this.$refs.form02.validate(valid => {
        if (valid) {
          apiService.post("/register/update-email", {
            ...this.form02
          }).then(() => {
            this.$message.success(this.$t('修改成功'))
          });
        }
      });
    },
    // 推送邮件
    pushEmail(val) {
      apiService
        .post("/push-email", {
          isSubscribeEmail: val,
        })
        .then(() => {
          this.$message.success(this.$t("修改成功"));
        });
    },
    // 低余额推送
    pushCost(val) {
      apiService
        .post("/push-cost", {
          isSubscribeCost: val,
        })
        .then(() => {
          this.$message.success(this.$t("修改成功"));
        });
    },
    //推送余额
    submitAmount() {
      this.$refs.form03.validate((valid) => {
        if (valid) {
          apiService
            .post("/push-cost", {
              ...this.form03,
            })
            .then(() => {
              this.$message.success(this.$t("修改成功"));
            });
        }
      });
    },
    copyToClipboard(text) {
      // const text = this.$refs.copy[index].textContent;
      // let text = this.$refs.copy[index].innerHTML;
      // text = text.replace(/<br>/g, '\n');
      // text = this.removeHTMLTags(text)
      const input = document.createElement('textarea');
      input.value = text; // 设置要复制的文本
      document.body.appendChild(input);
      input.select(); // 选中文本
      document.execCommand('copy'); // 执行复制操作
      document.body.removeChild(input); // 移除临时的输入框
      this.$message.success('内容已复制到剪贴板');
    },
  },
};
</script>

<style scoped lang="scss">
.feature {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;

  .item {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.2rem;

    .t1 {
      color: #666;
      font-size: 0.12rem;
      margin-top: 0.1rem;
    }

    .t2 {
      color: #333;
      font-size: 0.14rem;
    }

    .t3 {
      width: 0.5rem;
      height: 0.24rem;
      background-color: red;
      border-radius: 6px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
    }

    .t {
      // height: .52rem;
      padding-top: 0.1rem;
      text-align: center;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      // background-image: url("@/assets/images/user_m_icon_02_03.png");
      // background-size: 100% 100%;
      color: #333;
      font-size: 0.16rem;
    }

    .cont {
      padding: 0.2rem;

      .btn {
        color: #fff;
        font-size: 0.14rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(to right, #7594fc, #4383fd);
        height: 0.3rem;
        border-radius: 6px;
      }
    }
  }
}

.api {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-top: 0.1rem;
  padding: 0.2rem 5px;
  display: flex;
  align-items: center;

  .key {
    background-image: linear-gradient(to right, #7594fc, #4483fd);
    padding: 0.02rem 0.1rem;
    color: #fff;
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 0.14rem;
  }

  .val {
    border: 1px solid #f1f1f1;
    flex: 1;
    height: 0.3rem;
    margin-left: 5px;
    border-radius: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.1rem 0;
  background-image: url("@/assets/images/user_m_bg_01_03.png");
  background-size: 100% 100%;
  padding: 0.2rem;

  .r {
    display: flex;
    align-items: center;

    .btn {
      width: 0.6rem;
      height: 0.3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border-radius: 8px;
      font-size: 0.14rem;

      &.btn-1 {
        color: #fc6f24;
      }

      &.btn-2 {
        color: #51c28f;
        margin-left: 10px;
      }
    }
  }

  .l {
    color: #fff;
    font-size: 0.14rem;

    .money {
      font-size: 0.2rem;
      font-weight: bold;
    }
  }
}

::v-deep .feature .el-form-item__content {
  display: flex;
}
</style>
